<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
  </ul>
</body>

<script>
  let ul = document.getElementsByTagName('ul')[0]
  
  //创建文档碎片
  const frg=document.createDocumentFragment()

  let data = [{
      "title": "神迹守卫-墨子",
      "img-url": "http://shp.qpic.cn/ishow/2735061709/1623893849_84828260_1982_sProdImgNo_7.jpg/0"
    },
    {
      "title": "老夫子-航海奇遇记",
      "img-url": "http://shp.qpic.cn/ishow/2735061709/1623893665_84828260_15008_sProdImgNo_7.jpg/0"
    },
    {
      "title": "妲己-女仆咖啡",
      "img-url": "http://shp.qpic.cn/ishow/2735061617/1623836872_84828260_10117_sProdImgNo_7.jpg/0"
    },
    {
      "title": "刘禅-天才门将",
      "img-url": "http://shp.qpic.cn/ishow/2735061514/1623739145_84828260_30688_sProdImgNo_7.jpg/0"
    },
    {
      "title": "神迹守卫-墨子",
      "img-url": "http://shp.qpic.cn/ishow/2735061709/1623893874_84828260_8260_sProdImgNo_7.jpg/0"
    },
    {
      "title": "老夫子-航海奇遇记",
      "img-url": "http://shp.qpic.cn/ishow/2735061709/1623893733_84828260_1601_sProdImgNo_7.jpg/0"
    },
    {
      "title": "妲己-女仆咖啡",
      "img-url": "http://shp.qpic.cn/ishow/2735061617/1623836896_84828260_11275_sProdImgNo_7.jpg/0"
    },
    {
      "title": "刘禅-天才门将",
      "img-url": "http://shp.qpic.cn/ishow/2735061514/1623739169_84828260_12138_sProdImgNo_7.jpg/0"
    },
    {
      "title": "杨戬-埃及法老",
      "img-url": "http://shp.qpic.cn/ishow/2735061514/1623737318_84828260_16282_sProdImgNo_7.jpg/0"
    },
    {
      "title": "李元芳-逐浪之夏",
      "img-url": "http://shp.qpic.cn/ishow/2735061514/1623737167_84828260_23976_sProdImgNo_7.jpg/0"
    },
    {
      "title": "橘右京-神梦一刀",
      "img-url": "http://shp.qpic.cn/ishow/2735061514/1623737077_84828260_1967_sProdImgNo_7.jpg/0"
    },
    {
      "title": "关羽-一骑当千",
      "img-url": "http://shp.qpic.cn/ishow/2735061514/1623737003_84828260_23984_sProdImgNo_7.jpg/0"
    },
    {
      "title": "云中君-流云之翼",
      "img-url": "http://shp.qpic.cn/ishow/2735061115/1623397771_84828260_397_sProdImgNo_7.jpg/0"
    },
    {
      "title": "亚瑟-狮心王",
      "img-url": "http://shp.qpic.cn/ishow/2735061115/1623397565_84828260_8671_sProdImgNo_7.jpg/0"
    },
    {
      "title": "孙悟空-西部大镖客",
      "img-url": "http://shp.qpic.cn/ishow/2735061115/1623397453_84828260_9247_sProdImgNo_7.jpg/0"
    },
    {
      "title": "刘备-仁德义枪",
      "img-url": "http://shp.qpic.cn/ishow/2735061115/1623397292_84828260_29165_sProdImgNo_7.jpg/0"
    },
    {
      "title": "兰陵王-暗影刀锋",
      "img-url": "http://shp.qpic.cn/ishow/2735061115/1623397188_84828260_31017_sProdImgNo_7.jpg/0"
    },
    {
      "title": "后羿-阿尔法小队",
      "img-url": "http://shp.qpic.cn/ishow/2735061115/1623397095_84828260_6718_sProdImgNo_7.jpg/0"
    },
    {
      "title": "狄仁杰-锦衣卫",
      "img-url": "http://shp.qpic.cn/ishow/2735061115/1623397003_84828260_13033_sProdImgNo_7.jpg/0"
    },
    {
      "title": "盾山-圆桌骑士",
      "img-url": "http://shp.qpic.cn/ishow/2735061115/1623396861_84828260_5463_sProdImgNo_7.jpg/0"
    },
    {
      "title": "嬴政-优雅恋人",
      "img-url": "http://shp.qpic.cn/ishow/2735061115/1623396770_84828260_12873_sProdImgNo_7.jpg/0"
    },
    {
      "title": "驱傩正仪-钟馗",
      "img-url": "http://shp.qpic.cn/ishow/2735061017/1623316710_84828260_2587_sProdImgNo_7.jpg/0"
    },
    {
      "title": "蒙犽-龙鼓争鸣",
      "img-url": "http://shp.qpic.cn/ishow/2735061017/1623316637_84828260_16322_sProdImgNo_7.jpg/0"
    },
    {
      "title": "廉颇-无尽征程",
      "img-url": "http://shp.qpic.cn/ishow/2735061010/1623290691_84828260_19227_sProdImgNo_7.jpg/0"
    }
  ]
  for (let i in data) {
    const item = document.createElement('li')

    const img = document.createElement('img')
    img.src = data[i]['img-url']
    img.width =600
    const hh=document.createElement('h3')
    item.innerText = data[i].title
    
    frg.appendChild(item)
    frg.appendChild(hh)
    frg.appendChild(img)
  }
  ul.appendChild(frg)
</script>

</html>